<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <style>
        .jiage {
            background-color: rgb(255, 214, 161);
            font-size: 29px;
            box-shadow: 3px 8px 16px 5px #5e4444;
            text-align: center;
        }
    </style>
    <title>快递重量</title>
</head>

<body>

    <div id="app">
        <van-nav-bar title="寄件助手(山东)" placeholder fixed></van-nav-bar>

        <van-cell-group title="快递信息录入">
            <van-form @submit="onSubmit">
                <van-field v-model="name" label="用户名" placeholder="请输入用户名" required></van-field>
                <van-field v-model="tel" type="tel" label="手机号" required placeholder="请输入手机号"></van-field>
                <van-field v-model="digit" type="digit" label="重量" required placeholder="请输入预估重量" readonly clickable
                    @touchstart.native.stop="showdigit = true">
                    <template #extra>
                        KG
                    </template>
                </van-field>
                <van-field v-model="sname" label="收货人姓名" placeholder="请输入收货人姓名" required></van-field>
                <van-field v-model="stel" type="tel" label="收货人手机号" required placeholder="请输入手机号"></van-field>
                <van-field v-model="saddress" label="地址" placeholder="收货人详细地址" required></van-field>
                <div class="jiage" style="margin: 16px;">
                    预计花费{{jiage}}<strong>元</strong>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>

        </van-cell-group>
        <van-number-keyboard v-model="digit" :show="showdigit" @blur="showdigit = false" />

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                showdigit: false,
                msg: "1233",
                name: "",
                tel: "",
                digit: "",
                sname: '',
                stel: "",
                saddress: "",
                jiage: 0
            }
        },
        methods: {
            onSubmit: function () {
                vant.Toast.success('提交');
            }
        },
        watch: {
            digit: function (val) {
                console.log(val);
                if (val <= 1) {
                    this.jiage = 10
                } else if (val > 1) {
                    let newjiage = 0
                    this.jiage = Math.ceil(val - 1) * 2 + 10
                } else if (val == "") {
                    this.jiage = 0
                }

            }
        }
    })
</script>

</html>